import { Star } from 'lucide-react'; // 从 'lucide-react' 库中导入 Star 图标
import { cn } from '@/lib/utils'; // 从 utils 库中导入 cn 函数

// 定义 FooterProps 接口，用于描述 Footer 组件的属性类型
interface FooterProps {
    title: string; // 标题，类型为字符串
    authorLabel: string; // 作者标签，类型为字符串
    createdAtLabel: string; // 创建时间标签，类型为字符串
    isFavorite: boolean; // 是否为收藏项，类型为布尔值
    onClick: () => void; // 点击事件处理函数，返回值为空
    disabled: boolean; // 是否禁用，类型为布尔值
}

// 定义并导出 Footer 组件
export const Footer = ({
    title, // 标题
    authorLabel, // 作者标签
    createdAtLabel, // 创建时间标签
    isFavorite, // 是否为收藏项
    onClick, // 点击事件处理函数
    disabled, // 是否禁用
}: FooterProps) => {
    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
        e.stopPropagation();
        e.preventDefault();
        onClick();
      };
    return (
        <div className="relative bg-white p-3">
            {/* 外层容器，设置相对定位、背景颜色为白色、内边距为3 */}
            <p className="text-[13px] truncate max-w-[calc(100%-20px)]">
                {/* 标题部分，字体大小为13px，超出部分截断，最大宽度为计算值 */}
                {title}
            </p>
            <p className="opacity-0 group-hover:opacity-100 transition-opacity text-[11px] text-muted-foreground">
                {/* 作者和创建时间标签部分，初始透明度为0，悬停时透明度变为100%，添加过渡效果，字体大小为11px，文本颜色为 muted-foreground */}
                {authorLabel}, {createdAtLabel}
            </p>
            <button
                disabled={disabled} // 设置按钮的禁用状态
                onClick={handleClick} // 绑定点击事件处理函数
                className={cn(
                    "opacity-0 group-hover:opacity-100 transition absolute top-3 right-3 text-muted-foreground", // 初始透明度为0，悬停时透明度变为100%，添加过渡效果，绝对定位在右上角，文本颜色为 muted-foreground
                    "hover:text-blue-500", // 悬停时（且未禁用）透明度变为100%
                    disabled && "cursor-not-allowed opacity-75" // 如果禁用，设置光标为不可用状态，并将透明度设置为75%
                )}
            >
                <Star
                    className={cn(
                        "h-4 w-4", // 设置图标的高度和宽度为4
                        isFavorite && "fill-blue-600 text-blue-600" // 如果是收藏状态，设置填充颜色和文本颜色为蓝色
                    )}
                />
            </button>
        </div>
    );
}